<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>我的出勤</title>
		<link type="text/css" rel="stylesheet" href="../jquery-easyui-1.4.2/themes/default/easyui.css">
		<link type="text/css" rel="stylesheet" href="../jquery-easyui-1.4.2/themes/icon.css">
		<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
		
		<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />
		<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
		
		<script type="text/javascript" src="../jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript" src="../js/dateFormat_CY.js"></script>
		<script type="text/javascript" src="../js/laydate.js"></script>
		<script type="text/javascript">
			//按条件组合搜索
			function searchLog(){
				var late = $("#late").val();
				var before = $("#before").val();
				var fromDate = $("#fromDate").datebox('getValue');
				var toDate = $("#toDate").datebox('getValue');
				$('#dg').datagrid('load',
						{pageNo:1, pageSize:10,late:late,before:before,
					fromDate:fromDate,toDate:toDate});
			};
			$(function(){
				//加载表格渲染数据
				$('#dg').datagrid({    
				    url:'../sign/loadSignIn.do?userId=<%=request.getParameter("userId")%>',
				    pagination:true,
				    rownumbers:true,
				    striped:true,
				    queryParams:{pageNo:1,pageSize:10,late:-1,before:-1,
						fromDate:"",toDate:""},
				    frozenColumns:[[{field:"checkboxes",width:50,checkbox:true}]],
				    columns:[[   
						{field:'signInId',title:'Id',width:100,hidden:true},
				        {field:'signInDate',title:'日期',width:100,align:'center',formatter:function(signInDate){
				        	return getDateTime(signInDate);}},    
				        {field:'onDutyTime',title:'上班时间',width:100,align:'center',formatter:function(onDutyTime){
				        	return getLocalTime(onDutyTime);}},
				        {field:'offDutyTime',title:'下班时间',width:100,align:'center',formatter:function(offDutyTime){
				        	return getLocalTime(offDutyTime);}},    
				        {field:'duration',title:'时长',width:120,
				        	align:'center'},
				        {field:'onDutySignInIp',title:'上班签到IP',width:200,align:'center'},
				        {field:'offDutySignInIp',title:'下班签到IP',width:200,align:'center'}
				    ]]    
				});
				/* $('#dg').datagrid({
					toolbar: '#tb'
				}); */
				var page = $('#dg').datagrid('getPager');
				page.pagination({
					onSelectPage:function(pageNumber, pageSize){
						$('#dg').datagrid('load',{pageNo:pageNumber, pageSize:pageSize});
						page.pagination({
							pageNumber:pageNumber,
							pageSize:pageSize,
							late:-1,
							before:-1,
							fromDate:"",
							toDate:""
						});
					}
				});
			});
			function getLocalTime(jsondate) { 
				  jsondate=""+jsondate+"";//因为jsonDate是number型的indexOf会报错
				  if (jsondate.indexOf("+") > 0) {
	                  jsondate = jsondate.substring(0, jsondate.indexOf("+"));
	              }
	              else if (jsondate.indexOf("-") > 0) {
	                  jsondate = jsondate.substring(0, jsondate.indexOf("-"));
	              }
	              var date = new Date(parseInt(jsondate, 10));
	              var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
	              var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
	              var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
	              var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
	              var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
	              return hours + ":" + minutes + ":" + seconds;
			 } 
			function getDateTime(jsondate) { 
				  jsondate=""+jsondate+"";//因为jsonDate是number型的indexOf会报错
				  if (jsondate.indexOf("+") > 0) {
	                  jsondate = jsondate.substring(0, jsondate.indexOf("+"));
	              }
	              else if (jsondate.indexOf("-") > 0) {
	                  jsondate = jsondate.substring(0, jsondate.indexOf("-"));
	              }
	              var date = new Date(parseInt(jsondate, 10));
	              var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
	              var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
	              return date.getFullYear() + "-" + month + "-" + currentDate;
			 } 
		
		</script>
	
	</head>
	
	<body>
		<div id="toolbar" class="row" style="margin-top: 30px;">
			
			<div class="col-md-3 col-lg-offset-1" >
				<span>上班晚于:</span>
		  		<input id="late" class="easyui-timebox" style="border-radius: 5px;border-color: #9ACFEA;height: 30px;width: 200px;" type="text" placeholder="请输入时间分钟" >
			</div>
			<div class="col-md-3" >
			  	<span>或下班早于:</span>
				<input id="before" style="border-radius: 5px;border-color: #9ACFEA;height: 30px;width: 200px;" type="text" placeholder="请输入时间分钟" >
			</div>
		</div>
		<div class="row" style="margin-top: 20px;">
			<div class="col-md-3 col-lg-offset-1" >
				<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日  期:</span>
		  		<input id="fromDate" type="text" style="height: 30px;width: 200px;" class="easyui-datebox">
			</div>
			<div class="col-md-3" >
		  		<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至:</span>
		  		<input id="toDate" type="text" style="height: 30px;width: 200px;" class="easyui-datebox">
			</div>
			<div class="col-md-3" >
				<a id="btn" href="javascript:searchSign();" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a> 
			</div>
			<div class="col-md-2" >
				<a id="btn" href="javascript:onSign();" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">上班签到</a> 
				<a id="btn" href="javascript:offSign();" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">下班签到</a> 
			</div>
			<!-- <button onclick="laydate()">日期</button> -->
		</div>
		<table id="dg"></table>
		
	</body>
</html>